<script lang="ts" setup>
import { ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
// 定义 props
const props = defineProps<{
	carsInfo: {
		img: string
		name: string,
		tel: string,
		classify: string,
		carsId: string,
		routeList: Array<{
			start: string,
			end: string,
			isFullChecked: string,
			id: string
		}>
	}
}>();
const { carsInfo } = toRefs(props);

console.log(carsInfo.value);


//// 编辑路线函数 
function editClick(item: object) {
	router.push({
		name: 'routeedit', query: {
			...item
		}
	})
}
</script>

<template>
	<!-- 上部车主信息 -->
	<div class="boxWrapper">
		<div class="boxleft" :style="{ backgroundImage: `url(${carsInfo.img})` }">
		</div>
		<div class="boxright">
			<div class="title"> <span class="name">{{ carsInfo.name }}</span>&emsp;<span class="tel">{{
				carsInfo.tel
			}}</span></div>
			<div> <span class="secTitle">车辆类型:&emsp;</span>{{ carsInfo.classify }}</div>
			<div> <span class="secTitle">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:&emsp;</span>{{ carsInfo.carsId }}</div>
		</div>
	</div>
	<div class="seperate">
		<span>……&nbsp; 车辆线路&nbsp; ……</span>
	</div>

	<!-- 每条路线 -->
	<div class="route" v-for="(item, index) in carsInfo.routeList" @click="editClick(item)">
		<div class="left"><span class="order">{{ index + 1 }}.</span>&emsp;{{ item.start }}&emsp;<svg t="1731915383488"
				class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4984"
				width="12" height="12">
				<path
					d="M512 576.00000001l0-128.00000002L53.31200001 448A53.312 53.312 0 0 0 0 501.312l0 21.376A53.312 53.312 0 0 0 53.31200001 576L512 576.00000001z"
					fill="#0e932e" p-id="4985"></path>
				<path
					d="M593.28 781.824l358.08-220.8a53.312 53.312 0 0 0 0.576-90.432l-358.08-226.752A53.312 53.312 0 0 0 512 288.896L512 736.44799999a53.312 53.312 0 0 0 81.28 45.44000002z"
					fill="#0e932e" p-id="4986"></path>
			</svg>&emsp;{{ item.end }}
		</div>
		<div class="right">
			<div class="isFullChecked">{{ item.isFullChecked == 'true' ? '整车' : '零担' }}
			</div>
			<div class="edit"><svg t="1731915626188" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="8784" width="16" height="16">
					<path
						d="M283.648 174.081l57.225-59.008 399.479 396.929-399.476 396.924-57.228-59.004 335.872-337.92z"
						fill="#8a8a8a" p-id="8785"></path>
				</svg></div>
		</div>
	</div>

</template>

<style lang="scss" scoped>
.boxWrapper {
	background-color: white;
	display: flex;
	color: black;
	box-sizing: border-box;
	padding-left: 20px;
	align-items: center;
	height: 120px;

	.boxleft {
		height: 80px;
		width: 80px;
		background-size: 100% 100%;
		margin-right: 20px;
	}

	.boxright {
		flex: 1;
		display: flex;
		flex-direction: column;

		.title {
			line-height: 40px;
			font-size: 16px;
		}

		.name {
			font-weight: bold;
		}

		.tel,
		.secTitle {
			color: #888888;
			line-height: 20px;
		}
	}
}

.seperate {
	display: flex;
	padding-top: 25px;
	color: #888888;
	align-items: center;
	justify-content: center;
	height: 50px;
}

.route {
	background-color: white;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: black;
	box-sizing: border-box;
	padding: 0 15px;

	.left {
		flex: 1;

		.order {
			color: blue;
			line-height: 30px;
		}

	}

	.right {
		display: flex;

		justify-content: space-between;


		.isFullChecked {
			border-radius: 5px;
			background-color: #e2eeff;
			width: 84px;
			text-align: center;
			line-height: 28px;

			color: #888888;
		}

		.edit {

			height: 30px;
			display: flex;
			align-items: center;
		}
	}
}
</style>